<template>
  <!--  标识范围 -->
  <div id="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="书籍ID">
        <el-input v-model="bookQuery.bookId" placeholder="书籍ID"></el-input>
      </el-form-item>
      <el-form-item label="书名">
        <el-input v-model="bookQuery.bookName" placeholder="书名"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="bookQuery.author" placeholder="作者"></el-input>
      </el-form-item>
      <el-form-item label="连载">
        <el-select v-model="bookQuery.isSerial" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="bookQuery.isState" clearable placeholder="请选择">
          <el-option :value="1" label="上线"/>
          <el-option :value="0" label="未上线"/>
        </el-select>
      </el-form-item>
      <el-form-item label="原创">
        <el-select v-model="bookQuery.isOriginal" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select v-model="bookQuery.isFirstType" clearable placeholder="请选择">
          <el-option :value="1" label="网文女频"/>
          <el-option :value="0" label="网文男频"/>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="二级分类">-->
<!--&lt;!&ndash;        <el-select v-model="formInline.region" placeholder="请选择">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="是" value="shanghai"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-option label="否" value="beijing"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-select>&ndash;&gt;-->
<!--      </el-form-item>-->
      <el-form-item label="全本收费">
        <el-select v-model="bookQuery.isCharge" clearable placeholder="请选择">
          <el-option :value="1" label="收费"/>
          <el-option :value="0" label="免费"/>
        </el-select>
      </el-form-item>
      <el-form-item label="授权开始时间">
        <el-date-picker
          v-model="bookQuery.beginDate"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="bookQuery.endDate"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
      </el-form-item>
      <el-button type="primary" @click="resetData()">清空</el-button>
      <router-link :to="'/cms/book/create'">
        <el-button type="primary">添加书籍</el-button>
      </router-link>
      <el-button type="primary" @click="exportExcel()">导出<i class="el-icon-download el-icon--right"></i></el-button>
      <el-button type="primary" @click="excelDialogVisible=true">导入<i class="el-icon-upload el-icon--right"></i></el-button>
    </el-form>
    <el-dialog
      title="导入Excel"
      :visible.sync="excelDialogVisible"
      width="30%">
      <el-upload
        ref="upload"
        name="file"
        accept="application/vnd.ms-excel"
        :action="BASE_API + '/cms/book/importEasyExcel'"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :disabled="importBtnDisabled"
        :limit="1"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="importExcel">上传到服务器</el-button>
      </el-upload>
    </el-dialog>
    <el-table :data="bookList" style="width: 100%">
      <el-table-column prop="id" label="书籍ID" width="180" />
      <el-table-column prop="bookName" label="书名" width="180" />
      <el-table-column prop="author" label="作者"/>
      <el-table-column prop="isFirstType" label="一级分类" :formatter="firstFormat"/>
      <el-table-column prop="seconder" label="二级分类" :formatter="secondFormat"/>
      <el-table-column prop="isSerial" label="连载">

      </el-table-column>
      <el-table-column prop="size" label="字数"/>
      <el-table-column prop="isState" label="状态">
      <template slot-scope="scope">
        {{ scope.row.isState === 1 ? '上线':'未上线' }}
      </template>
      </el-table-column>
      <el-table-column prop="isCharge" label="全本收费">
        <template slot-scope="scope">
          {{ scope.row.isCharge === 1 ? '是':'否' }}
        </template>
      </el-table-column>
      <el-table-column prop="empowerCreate" label="授权开始时间"/>
      <el-table-column prop="empowerEnd" label="授权结束时间"/>
      <el-table-column prop="isOriginal" label="原创">
        <template slot-scope="scope">
          {{ scope.row.isOriginal === 1 ? '是':'否' }}
        </template>
      </el-table-column>
      <el-table-column prop="isEmpowerState" label="授权状态">
        <template slot-scope="scope">
          {{ scope.row.isEmpowerState === 1 ? '有效':'过期' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteBook(scope.row.id, scope.row.status)">删除</el-button>
          <router-link :to="'/cms/book/update/'+scope.row.id">
            <el-button type="primary" size="mini" >修改</el-button>
          </router-link>
          <el-button v-if="scope.row.isUpDown === 0" type="danger" size="mini"  @click="onOrOffBook(scope.row.id, 1)">上架书籍</el-button>
          <el-button v-else type="danger" size="mini" @click="onOrOffBook(scope.row.id, 0)">下架书籍</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="findPage">
    </el-pagination>
  </div>
</template>

<script>
  import book from "@/api/cms/book";
  import category from "@/api/cms/category";
  export default {
    data(){ // 定义变量与初始化变量值
      return {
        bookList: null, // 数据列表
        bookQuery: {}, // 查询条件封装对象
        total: 0, // 总记录数
        pageNo:1, // 页码
        pageSize:10, // 每页显示记录数
        currentTime:'', // 当前时间
        BASE_API: process.env.VUE_APP_BASE_API, // ## 接口API地址
        excelDialogVisible: false, // ## 导入Excel窗口, false为关闭
        importBtnDisabled: false, // ## 按钮是否禁用,false为不禁用
        firstCategoryList: [], // ## 一级分类封装集合
        secondCategoryList: [] // ## 二级分类封装集合
      }
    },
    created() {
      this.findPage()
      this.getCategoryList()
    },
    methods: { // 自定义函数
      getCategoryList() { // ## 获取分类数据
        category.getCategoryList()
          .then(response => {
            console.log(response.data.items)
            this.firstCategoryList = response.data.items
          })
      },
      findPage(pageNo = 1) { // 查询
        this.pageNo = pageNo
        // 调用 api 中的后端请求方法
        book.query(this.pageNo, this.pageSize, this.bookQuery)
            .then(response => { // 成功之后执行的方法
              this.bookList = response.data.items
              this.total = response.data.total
            })
      },
      resetData() { // 查询重置功能
        // 清空查询数据
        this.bookQuery = {}
        // 重新查询
        this.findPage()
      },
      deleteBook(bookId,isState) { // 删除方法
        if (isState == 1) {
           this.$message({
             type:'success',
             message:'注意，不能删除已经上架的书籍'
           })
        } else{
          this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            book.deleteBook(bookId)
                .then(response => {
                  // 成功删除后，做消息提示
                  this.$message({
                    type:'success',
                    message:'删除成功！'
                  })
                  // 重新查询
                  this.findPage()
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      onOrOffBook(bookId,isUpDown) { // 上下架书籍
        // 进行确认操作
        this.$confirm('此操作将改变书籍状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          book.onOrOffBook(bookId,isUpDown)
               .then(response => {
                 // 进行消息提示
                 this.$message({
                   type:'success',
                   message:'设置成功'
                 })
                 // 重新查询list
                 this.findPage()
               })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消此操作'
          });
        });
      },
      exportExcel() { // ## 导出Excel
        document.location.href = this.BASE_API + '/cms/book/exportEasyExcel'
      },
      importExcel() { // 导入Excel
        this.importBtnDisabled = true;
        this.$refs.upload.submit()
      },
      fileUploadSuccess(response) { // 导入成功后执行的方法
        // 导入成功后关闭窗口
        this.excelDialogVisible = false
        // 提示信息
        this.$message({
          type:'success',
          message:'导入成功'
        })
        // 重新查询获取新数据
        this.findPage()
      },
      fileUploadError() { // 导入失败后执行的方法
        // 提示信息
        this.$message({
          type:'error',
          message:'导入失败'
        })
      },
      firstFormat(row){ // ## 一级分类中文回显
        for (let i = 0; i < this.firstCategoryList.length; i++) {
          if (this.firstCategoryList[i].id === row.isFirstType){
            return this.firstCategoryList[i].title
          }
        }
      },
      secondFormat(row){ // ## 二级分类中文回显
        for (let i = 0; i < this.firstCategoryList.length; i++) {
          if (this.firstCategoryList[i].id === row.isFirstType){
            for (let j = 0; j < this.firstCategoryList[i].secondCategoryList.length; j++) {
              if (row.seconder === this.firstCategoryList[i].secondCategoryList[j].id){
                return this.firstCategoryList[i].secondCategoryList[j].title
              }
            }
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
